<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>会员名录</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 内容栏 -->
        <div class="content-box">
          <div class="content-title">会员名录</div>
          <div class="content-list">
            <div class="memberBox">
              <div class="member-table">
                <table cellspacing="0">
                  <tr>
                    <th>序号</th>
                    <th>企业名称</th>
                    <th>统一社会信用代码</th>
                    <th>归属地区</th>
                    <th>入会级别</th>
                    <th>入会日期</th>
                    <th>操作</th>
                  </tr>
                  <tr
                    align="center"
                    v-for="(item, index) in tableData"
                    :key="index"
                  >
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.code }}</td>
                    <td>{{ item.belongingPlace }}</td>
                    <td>{{ item.level }}</td>
                    <td>{{ item.date }}</td>
                    <td>
                      <router-link to="/MemberDetail">详细信息</router-link>
                    </td>
                  </tr>
                </table>
                <div class="pagination">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      
<script>
export default {
  name: "Directory",
  data() {
    return {
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
      tableData: [
        {
          id: 1,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 2,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 3,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 4,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 5,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 6,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
        {
          id: 7,
          name: "贵州省融资担保有限责任公司",
          code: "51520000770584540P",
          belongingPlace: "省级",
          level: "会长单位",
          date: "2023-03-16",
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
      
      <style scoped>
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.content-body .menu-box {
  /* border: 1px solid #dcdadd; */
  flex: 1;
  border-radius: 5px;
  margin-right: 40px;
}

.content-body .content-box {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .content-box .content-title {
  font-size: 28px;
  font-family: Microsoft YaHei;
}

.content-list {
  width: 100%;
}

.pagination {
  margin-top: 54px;
  display: flex;
  justify-content: center;
}
.content-list .content-item {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  cursor: pointer;
}

.content-list .content-item:hover {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #007aff;
}

.item-right {
  color: #787878;
}
.menu-title {
  background-color: #0056a2;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.menu-title span {
  margin-left: 12px;
}

.menu-item {
  border: 1px solid #dcdadd;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
.memberBox {
  margin: 50px 0;
  height: 500px;
}

.memberBox .member-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memberBox .member-title div:nth-child(1) {
  color: #285cac;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.memberBox .member-title div:nth-child(1) img {
  margin-right: 5px;
}

.memberBox .member-title div:nth-child(2) {
  color: #666666;
  font-size: 16px;
  cursor: pointer;
}

.member-table {
  margin-top: 20px;
}

.member-table table {
  width: 100%;
  font-size: 18px;
}

.member-table table tr th {
  font-size: 16px;
  background-color: #285cac;
  color: #fff;
  font-weight: 400;
  padding: 15px 0;
  border: none;
}

.member-table table tr td {
  font-size: 14px;
  font-weight: 400;
  padding: 18px 0;
  border-bottom: 1px solid #dfdfdf;
}

.member-table table tr td a:link {
  color: #285cac;
}

.member-table table tr td a:visited {
  color: #285cac;
}
</style>